<template style="background: green">
  <!--外层控制显示位置-->
  <el-row :gutter="0" style="border: 1px solid white;background: #e5e9f2"><!---->
    <el-col :xs="0" :sm="6" :md="7" :lg="8" :xl="9"><div class="grid-content bg-purple" style="color: #e5e9f2">8 6 4 3 1</div></el-col>
    <el-col :xs="24" :sm="12" :md="10" :lg="7" :xl="6" style="margin-top:10px;margin-bottom:10px;height: 875px;"><!--border: 1px solid green;-->

      <!--主体内容#eee-->
      <el-container style="background: #FAFAFA;"><!--border: 1px solid red;-->
        <el-main>
          <router-view></router-view>
        </el-main>

        <el-footer width="490px" style="background-color: white;border: 1px solid #C1C1C1"><!--#545c64-->
          <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="color: red">
            <el-menu-item index="/borrow">借款</el-menu-item>
            <el-menu-item index="/repayment">还款</el-menu-item>
            <el-menu-item index="/message">消息</el-menu-item>
            <el-menu-item index="/personal">个人中心</el-menu-item>
          </el-menu>
        </el-footer>
      </el-container>

    </el-col>
    <el-col :xs="0" :sm="6" :md="7" :lg="8" :xl="9"><div class="grid-content bg-purple" style="color: #E6E7F3">4 6 8 9 11</div></el-col>

  </el-row>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style scoped>
  /*布局容器的样式*/
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /*background: #d3dce6;*/
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    /*min-height: 36px;*/
  }

</style>

